<template>
  <div v-loading="loading" class="container">
    <div style="display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: flex-start">
      <el-card shadow="always" style="margin: 10px">
        <div style="display: flex; flex-direction: column; width: 350px">
          <div style="font-size: 10px; color: #666666; margin-bottom: 10px">CPU使用率(%)</div>
          <div id="cpuChart" class="chart" />
        </div>
      </el-card>

      <el-card shadow="always" style="margin: 10px">
        <div style="display: flex; flex-direction: column; width: 350px;">
          <div style="font-size: 10px; color: #666666; margin-bottom: 10px">内存使用率(%)</div>
          <div id="memoryChart" class="chart" />
        </div>
      </el-card>

      <el-card shadow="always" style="margin: 10px">
        <div style="display: flex; flex-direction: column; width: 350px;">
          <div style="font-size: 10px; color: #666666; margin-bottom: 10px">网络流入宽带(bit/s)</div>
          <div id="netInChart" class="chart" />
        </div>
      </el-card>

      <el-card shadow="always" style="margin: 10px">
        <div style="display: flex; flex-direction: column; width: 350px;">
          <div style="font-size: 10px; color: #666666; margin-bottom: 10px">网络流出宽带(bit/s)</div>
          <div id="netOutChart" class="chart" />
        </div>
      </el-card>

      <el-card shadow="always" style="margin: 10px">
        <div style="display: flex; flex-direction: column; width: 350px;">
          <div style="font-size: 10px; color: #666666; margin-bottom: 10px">磁盘平均BPS(Bps)</div>
          <div id="diskAvgChart" class="chart" />
        </div>
      </el-card>

    </div>

  </div>
</template>

<script>
import echarts from 'echarts'
import moment from 'moment'
import { serverOsStateHistory } from '../../api/api'

export default {
  filters: {
    percentageFilter: function(value) {
      if (!value) {
        return ''
      }
      return Math.round(value * 100) / 100.0 + '%'
    }
  },
  data() {
    return {
      timer: undefined,
      loading: false,
      serverOsStatesArray: {},
      dbSelectCondition: '0',
      dateSelectCondition: '',
      cpuChart: undefined,
      cpuChartOption: {
        title: { show: false },
        grid: {
          left: 25,
          top: 10,
          bottom: 20,
          right: 10
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}<br/>CPU使用率 : {c}%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          nameTextStyle: {
            color: '#666666'
          },
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          axisTick: {
            show: true,
            inside: true,
            length: 5,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          offset: 0,
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#e5e5e5',
              type: 'dotted'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            lineStyle: {
              color: '#975FE4'
            },
            name: 'CPU使用率',
            data: [],
            type: 'line',
            smooth: true,
            showSymbol: false,
            hoverAnimation: true
          }
        ]
      },
      memoryChart: undefined,
      memoryChartOption: {
        title: { show: false },
        grid: {
          left: 25,
          top: 10,
          bottom: 20,
          right: 10
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}<br/>内存使用率 : {c}%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          nameTextStyle: {
            color: '#666666'
          },
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          axisTick: {
            show: true,
            inside: true,
            length: 5,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          offset: 0,
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#e5e5e5',
              type: 'dotted'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            lineStyle: {
              color: '#975FE4'
            },
            name: '',
            data: [],
            type: 'line',
            smooth: true,
            showSymbol: false,
            hoverAnimation: true
          }
        ]
      },
      netInChart: undefined,
      netInChartOption: {
        title: { show: false },
        grid: {
          left: 25,
          top: 10,
          bottom: 20,
          right: 10
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}<br/>网络流入宽带 : {c}bit/s'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          nameTextStyle: {
            color: '#666666'
          },
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          axisTick: {
            show: true,
            inside: true,
            length: 5,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          offset: 0,
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#e5e5e5',
              type: 'dotted'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            lineStyle: {
              color: '#975FE4'
            },
            name: '',
            data: [],
            type: 'line',
            smooth: true,
            showSymbol: false,
            hoverAnimation: true
          }
        ]
      },
      netOutChart: undefined,
      netOutChartOption: {
        title: { show: false },
        grid: {
          left: 25,
          top: 10,
          bottom: 20,
          right: 10
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}<br/>网络流出宽带 : {c}bit/s'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          nameTextStyle: {
            color: '#666666'
          },
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          axisTick: {
            show: true,
            inside: true,
            length: 5,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          offset: 0,
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#e5e5e5',
              type: 'dotted'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            lineStyle: {
              color: '#975FE4'
            },
            name: '',
            data: [],
            type: 'line',
            smooth: true,
            showSymbol: false,
            hoverAnimation: true
          }
        ]
      },
      diskAvgChart: undefined,
      diskAvgChartOption: {
        title: { show: false },
        grid: {
          left: 25,
          top: 10,
          bottom: 20,
          right: 10
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          nameTextStyle: {
            color: '#666666'
          },
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          axisTick: {
            show: true,
            inside: true,
            length: 5,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          offset: 0,
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#e5e5e5',
              type: 'dotted'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            lineStyle: {
              color: '#975FE4'
            },
            name: '',
            data: [],
            type: 'line',
            smooth: true,
            showSymbol: false,
            hoverAnimation: true
          }
        ]
      }
    }
  },
  mounted() {
    this.drawLine()
    this.getserverOsStateHistory()

    const that = this
    this.timer = setInterval(function() {
      setTimeout(function() {
        that.getserverOsStateHistory()
      }, 0)
    }, 60000)

    window.onresize = function() {
      that.cpuChart.resize()
      that.memoryChart.resize()
      that.netInChart.resize()
      that.netOutChart.resize()
      that.diskAvgChart.resize()
    }
  },
  destroyed() {
    window.onresize = null
    clearInterval(this.timer)
  },

  methods: {
    getserverOsStateHistory() {
      this.loading = true
      serverOsStateHistory({ host: '8.131.229.55' }).then((res) => {
        this.loading = false
        this.serverOsStatesArray = res.data
        this.updateCharts()
      }).catch(() => {
        this.loading = false
      })
    },
    updateCharts() {
      // 健康趋势
      this.cpuChartOption.series[0].data = []
      this.cpuChartOption.xAxis.data = []

      this.memoryChartOption.series[0].data = []
      this.memoryChartOption.xAxis.data = []

      this.netInChartOption.series[0].data = []
      this.netInChartOption.xAxis.data = []

      this.netOutChartOption.series[0].data = []
      this.netOutChartOption.xAxis.data = []

      this.diskAvgChartOption.series[0].data = []
      this.diskAvgChartOption.xAxis.data = []

      for (let i = 0; i < this.serverOsStatesArray.length; i++) {
        const state = this.serverOsStatesArray[i]

        this.cpuChartOption.series[0].data.push(100.00 - state['cpu_idle_time'])
        this.cpuChartOption.xAxis.data.push(moment(state['create_time']).format('HH:mm:ss'))

        this.memoryChartOption.series[0].data.push(state['mem_usage_rate'])
        this.memoryChartOption.xAxis.data.push(moment(state['create_time']).format('HH:mm:ss'))

        this.netInChartOption.series[0].data.push(state['net_in_bytes_total'])
        this.netInChartOption.xAxis.data.push(moment(state['create_time']).format('HH:mm:ss'))

        this.netOutChartOption.series[0].data.push(state['net_out_bytes_total'])
        this.netOutChartOption.xAxis.data.push(moment(state['create_time']).format('HH:mm:ss'))

        this.diskAvgChartOption.series[0].data.push(state['disk_io_reads_total'])
        this.diskAvgChartOption.xAxis.data.push(moment(state['create_time']).format('HH:mm:ss'))
      }

      this.cpuChart.setOption(this.cpuChartOption)
      this.memoryChart.setOption(this.memoryChartOption)
      this.netInChart.setOption(this.netInChartOption)
      this.netOutChart.setOption(this.netOutChartOption)
      this.diskAvgChart.setOption(this.diskAvgChartOption)
    },
    drawLine() {
      this.cpuChart = echarts.init(document.getElementById('cpuChart'))
      this.cpuChart.setOption(this.cpuChartOption)

      this.memoryChart = echarts.init(document.getElementById('memoryChart'))
      this.memoryChart.setOption(this.memoryChartOption)

      this.netInChart = echarts.init(document.getElementById('netInChart'))
      this.netInChart.setOption(this.netInChartOption)

      this.netOutChart = echarts.init(document.getElementById('netOutChart'))
      this.netOutChart.setOption(this.netOutChartOption)

      this.diskAvgChart = echarts.init(document.getElementById('diskAvgChart'))
      this.diskAvgChart.setOption(this.diskAvgChartOption)
    }
  }
}
</script>

<style lang="scss" scoped>
    .container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .top-card-title {
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
        line-height: 22px;
    }

    .top-card-detail {
        color: rgba(0, 0, 0, 0.85);
        font-weight: bolder;
        white-space: nowrap;
        word-break: break-all;
        font-size: 30px;
        line-height: 60px;
    }

    .card-header-title {
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
        white-space: nowrap;
        word-break: break-all;
        font-size: 18px;
    }

    .el-divider--horizontal {
        margin: 20px 0;
    }

    .el-col-5 {
        width: 20%;
    }

    .chart {
        width: 100%;
        height: 130px;
    }

</style>
